<template>
      <div class="modal fade" id="waitModel_vue" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
            data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog" style="width: 380px;">
                  <div class="modal-content" style="text-align: center;height: 200px;">
                        <div class="panel-body" style="height: 200px; overflow: hidden;">
                        <img style="z-index:888;margin-bottom: 10px;"
                              src="../../public/arrow45-004.gif"><br>
                        <span style="color: red;font-size: 13px;">データを準備しています。少々お待ちください。</span><br>
                        <span style="color: red;font-size: 13px;">抽出時間が10分以上かかる場合は処理を中断します。</span><br>
                        <label id="timer" style="margin-top:10px;">{{initTime}}</label><br>
                        <button type="button" id="btnCancel" class="btn btn-default" style="margin-top: 10px;"
                                    @click="cancel">キャンセル
                        </button>
                        </div>
                  </div>
            </div>
      </div>
</template>
<script>
export default {
      data:function (){
            return {
                  initTime:'00:00:00',
                  hour:0,
                  minute:0,
                  second:0,
                  timeObj:''
            };
      },
      props:{
            killTheadUrl:{
                  type:String
            }
      },
      methods:{
            jformat(arg){ 
                  return arg>=10 ? arg : '0' + arg; 
            },
            myinit(){
                  this.initTime='00:00:00';
                  this.hour = this.minute = this.second = 0;
            },
            coverStart(){
                  var vm = this;
                  this.myinit();
                  window.$('#waitModel_vue').modal('show');
                  this.timeObj = window.setInterval(function(){
                        vm.second++; 
                        if(vm.second>=60){ 
                              vm.second = 0; 
                              vm.minute++; 
                        } 
                        if(vm.minute>=60){ 
                              vm.minute = 0; 
                              vm.hour++; 
                        }
                        if(vm.hour>=12){ 
                              vm.hour=0;
                        }
                        vm.initTime = vm.jformat(vm.hour) + ':' + vm.jformat(vm.minute) + ':' + vm.jformat(vm.second); 
                  },1000);
            },
            coverEnd(){
                  var vm = this;
                  clearInterval(vm.timeObj);
                  window.$('#waitModel_vue').modal('hide');
            },
            cancel(){
                  var vm = this;
                  this.$http.post(this.killTheadUrl,{
                        taskid:global.taskId,
                        guidExcel:global.excelGuid
                  }).then(function(){
                        clearInterval(vm.timeObj);
                        window.$('#waitModel_vue').modal('hide');
                  });
            }
      },
      mounted(){
            var vm = this;
            window.cancel=function(){
                  clearInterval(vm.timeObj);
                  window.$('#waitModel_vue').modal('hide');
            };
            window.requestStart=function(){
                  vm.coverStart();
            };
      }
};
</script>